var birders = document.getElementById("ImageBirds");
var fish = document.getElementById("ImageFish");
var dogs = document.getElementById("ImageDogs");
var reptiles = document.getElementById("ImageReptiles");
var cat = document.getElementById("ImageCats");
var birder2 = document.getElementById("ImageBirds2");

var displayInf = document.getElementById("mainDisplayInf");
var xhr;
var table;
var p;

function displayBird(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processMain;
    xhr.open("GET","/catalog/viewCategoryInMain?categoryId=BIRDS",true);
    xhr.send(null);
}

function displayFish(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processMain;
    xhr.open("GET","/catalog/viewCategoryInMain?categoryId=FISH",true);
    xhr.send(null);
}

function displayDog(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processMain;
    xhr.open("GET","/catalog/viewCategoryInMain?categoryId=DOGS",true);
    xhr.send(null);
}

function displayReptiles(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processMain;
    xhr.open("GET","/catalog/viewCategoryInMain?categoryId=REPTILES",true);
    xhr.send(null);
}

function displayCat(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processMain;
    xhr.open("GET","/catalog/viewCategoryInMain?categoryId=CATS",true);
    xhr.send(null);
}

function processMain(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.info("成功响应");
            var array = xhr.responseText.split(",");

            p = document.createElement("h6");
            p.innerText = array[0] + "的商品信息,点击图像可查看详情";
            displayInf.appendChild(p);

            table = document.createElement("table");

            var tr = document.createElement("tr");

            var td1 = document.createElement("th");
            td1.appendChild(document.createTextNode("Product ID"));
            var td2 = document.createElement("th");
            td2.appendChild(document.createTextNode("Name"));

            tr.appendChild(td1);
            tr.appendChild(td2);
            table.appendChild(tr);

            for(var i = 1;i < array.length-1;i+=2){
                tr = document.createElement("tr");

                td1 = document.createElement("td");
                td1.appendChild(document.createTextNode(array[i]));
                td2 = document.createElement("td");
                td2.appendChild(document.createTextNode(array[i+1]));

                tr.appendChild(td1);
                tr.appendChild(td2);
                table.appendChild(tr);
            }

            displayInf.appendChild(table);
            displayInf.style.cssText = "display: block;";
        }
    }
}

function hidd(){
    displayInf.style.cssText = "display:none";
    displayInf.innerHTML="";
    p.innerHTML = "";
    table.innerHTML = "";
}

birders.onmouseover = displayBird;
birders.onmouseleave = hidd;

fish.onmouseover = displayFish;
fish.onmouseleave = hidd;

dogs.onmouseover = displayDog;
dogs.onmouseleave = hidd;

reptiles.onmouseover = displayReptiles;
reptiles.onmouseleave = hidd;

cat.onmouseover = displayCat;
cat.onmouseleave = hidd;

birder2.onmouseover = displayBird;
birder2.onmouseleave = hidd;